<template>
  <div>
    <div v-if="isPageLoading" class="page_loading fixed">
      <van-loading size="24px" vertical color="#fff">加载中...</van-loading>
    </div>
    <header>
      <van-nav-bar class="main_header notice_header" :title="title">
        <template #left>
          <span @click="goBack">返回</span>
        </template>
      </van-nav-bar>
    </header>
    <van-tabs v-model="activeName" class="tabstyle" @click="changeTab()">
      <van-tab title="个人报项" name="people">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text=""
            error-text=""
            :error.sync="error"
            @load="getDetailPerson"
          >
            <entryData v-if="people.length > 0" :data="people" :approve-status="approveStatus" :approve-remark="approveRemark" @onJumpToGameEntry="onJumpToGameEntry" />
            <div v-else>
              <van-empty description="暂无数据" />
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="团体报项" name="team">
        <van-pull-refresh v-model="teamRefreshing" @refresh="onTeamRefresh">
          <van-list
            v-model="teamLoading"
            :finished="teamFinished"
            finished-text=""
            error-text=""
            :error.sync="teamError"
            @load="getDetailGroup"
          >
            <entryData v-if="team.length > 0" :data="team" :approve-status="groupApproveStatus" :approve-remark="groupApproveRemark" @onJumpToGameEntry="onJumpToGameEntry" />
            <div v-else>
              <van-empty description="暂无数据" />
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import entryData from './entryData';
import { mapState } from 'vuex';
import {
  api_GET_EventsManagementEntryByPerson,
  api_GET_EventsManagementCompetitionEntryApprovalCompetitionEntryApprovalList // 获取审核状态
} from '@/extend/api/gameswaggerApi/app.js';
import {
  Api_GET_EventsManagementEntryByPersonQO,
  Api_GET_EventsManagementCompetitionEntryApprovalCompetitionEntryApprovalListQO
} from '@/lib/form/game/swaggerForm';
export default {
  components: {
    entryData
  },
  data() {
    return {
      title: '报项详情',
      totalPage: 0,
      isPageLoading: false,
      Api_GET_EventsManagementEntryByPersonQO: new Api_GET_EventsManagementEntryByPersonQO(),
      ApprovalCompetitionEntryApprovalListQO: new Api_GET_EventsManagementCompetitionEntryApprovalCompetitionEntryApprovalListQO(),
      activeName: 'team',
      gameId: '',
      delegationId: '',
      registerId: '',
      approveStatus: {},
      groupApproveStatus: {},
      approveRemark: '',
      groupApproveRemark: '',
      people: [],
      team: [],
      groupForm: {},
      loading: true,
      finished: false,
      refreshing: false,
      error: false,
      teamLoading: true,
      teamFinished: false,
      teamRefreshing: false,
      teamError: false
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType
    })
  },
  watch: {
    'currentUserType': {
      handler: function(val) {
        if (val) {
          this.delegationId = val.delegationId;
          this.registerId = val.registerId;
          this.getApproval();
          this.getGroupApproval();
        }
      },
      deep: true,
      immediate: true // 初始加载
    }
  },
  created() {
    this.gameId = this.$route.params.id;
    if (this.Api_GET_EventsManagementEntryByPersonQO) {
      this.groupForm = JSON.parse(JSON.stringify(this.Api_GET_EventsManagementEntryByPersonQO));
    }
  },
  methods: {
    getApproval() {
      var that = this;
      that.isPageLoading = true;
      const form = JSON.parse(JSON.stringify(that.ApprovalCompetitionEntryApprovalListQO));
      form.CompetitionId = that.$route.query.id;
      form.IsDelegation = false;
      form.EntryScopeId = that.registerId;
      api_GET_EventsManagementCompetitionEntryApprovalCompetitionEntryApprovalList(form).then(res => {
        that.approveStatus = res.items.length > 0 ? res.items[0].approval.approveStatus : {};
        that.approveRemark = res.items.length > 0 ? res.items[0].approval.approveRemark : '';
        if (JSON.stringify(that.approveStatus) !== '{}') {
          that.getDetailPerson();
        } else {
          that.loading = false;
        }
        that.isPageLoading = false;
      }).catch(() => {
        that.isPageLoading = false;
        that.loading = false;
        that.$notify({ type: 'error', message: '获取个人报项单失败' });
      });
    },
    getGroupApproval() {
      var that = this;
      that.isPageLoading = true;
      const form = JSON.parse(JSON.stringify(that.ApprovalCompetitionEntryApprovalListQO));
      form.CompetitionId = that.$route.query.id;
      form.IsDelegation = true;
      form.EntryScopeId = that.delegationId;
      api_GET_EventsManagementCompetitionEntryApprovalCompetitionEntryApprovalList(form).then(res => {
        that.groupApproveStatus = res.items.length > 0 ? res.items[0].approval.approveStatus : {};
        that.groupApproveRemark = res.items.length > 0 ? res.items[0].approval.approveRemark : '';
        if (JSON.stringify(that.groupApproveStatus) !== '{}') {
          that.getDetailGroup();
        } else {
          that.teamLoading = false;
        }
        that.isPageLoading = false;
      }).catch(() => {
        that.isPageLoading = false;
        that.teamLoading = false;
        that.$notify({ type: 'error', message: '获取团体报项单失败' });
      });
    },
    getDetailPerson(page) {
      this.finished = false;
      this.isPageLoading = true;
      if (this.refreshing) {
        this.people = [];
        this.refreshing = false;
        this.Api_GET_EventsManagementEntryByPersonQO.Page = 1;
      }
      this.Api_GET_EventsManagementEntryByPersonQO.SkipCount = (this.Api_GET_EventsManagementEntryByPersonQO.Page - 1) * this.Api_GET_EventsManagementEntryByPersonQO.MaxResultCount;

      var that = this;
      that.Api_GET_EventsManagementEntryByPersonQO.CompetitionId = that.$route.query.id;
      that.Api_GET_EventsManagementEntryByPersonQO.RegisterId = that.registerId;
      that.Api_GET_EventsManagementEntryByPersonQO.CompEntryApproveStatusCode = that.approveStatus.code;
      api_GET_EventsManagementEntryByPerson(that.Api_GET_EventsManagementEntryByPersonQO).then(res => {
        that.isPageLoading = false;
        var _data = res.items || [];
        var _total = res.totalCount;
        that.people = that.people.concat(_data);
        that.people = that.people.map(ktem => {
          return { ...ktem, isShow: false };
        });
        that.loading = false;
        if (_total > that.people.length) {
          that.Api_GET_EventsManagementEntryByPersonQO.Page += 1;
        } else {
          that.finished = true;
        }
      }).catch(() => {
        that.error = true;
        that.loading = false;
        that.isPageLoading = false;
      });
    },
    getDetailGroup(page) {
      this.teamFinished = false;
      this.isPageLoading = true;
      if (this.teamRefreshing) {
        this.team = [];
        this.teamRefreshing = false;
        this.groupForm.Page = 1;
      }
      this.groupForm.SkipCount = (this.groupForm.Page - 1) * this.groupForm.MaxResultCount;

      var that = this;
      that.groupForm.CompetitionId = that.$route.query.id;
      that.groupForm.DelegationId = that.delegationId;
      that.groupForm.CompEntryApproveStatusCode = that.groupApproveStatus.code;
      api_GET_EventsManagementEntryByPerson(that.groupForm).then(res => {
        that.isPageLoading = false;
        var _data = res.items || [];
        var _total = res.totalCount;
        that.team = that.team.concat(_data);
        that.team = that.team.map(ktem => {
          return { ...ktem, isShow: false };
        });
        that.teamLoading = false;
        if (_total > that.team.length) {
          that.groupForm.Page += 1;
        } else {
          that.teamFinished = true;
        }
      }).catch(() => {
        that.teamError = true;
        that.teamLoading = false;
        that.isPageLoading = false;
      });
    },
    changeTab() {
      this.loading = false;
      this.finished = true;
      this.teamLoading = false;
      this.teamFinished = true;
    },
    goBack() {
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/entry`
      });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getApproval();
    },
    onTeamRefresh() {
      // 清空列表数据
      this.teamFinished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.teamLoading = true;
      this.getGroupApproval();
    },
    // 跳转至赛事报名页面重新走流程
    onJumpToGameEntry () {
      const _gameRoute = this.$route.query.gameRoute;
      const _modifyType = this.activeName === 'people' ? 'Personal' : 'Delegation';
      this.$router.push({
        path: '/enter/' + _gameRoute + '?modifyType=' + _modifyType
      });
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
